import React from 'react';
import 'styles/components/simple-flow/flow-arrow.scss'
import { Icon } from 'antd'

/**
 * 流程图箭头，根据两个节点的位置进行渲染
 * 因为此流程图只有向下一种方向，方便了很多，只用计算x轴位置即可
 * @param props
 * @return {*}
 * @constructor
 */
function FlowArrow(props) {
  const { from, to, scale = 1 } = props;
  if(!document.getElementById(`flow-node-${from}`) || !document.getElementById(`flow-node-${to}`)){
    return (<div></div>)
  }
  let fromNode = document.getElementById(`flow-node-${from}`).getBoundingClientRect();
  let toNode = document.getElementById(`flow-node-${to}`).getBoundingClientRect();
  let offsetParent = document.getElementById('flow-arrow-container').getBoundingClientRect();
  let left = (Math.min(fromNode.left + fromNode.width / 2, toNode.left + toNode.width / 2) - offsetParent.left) / scale;
  let top = (fromNode.top + fromNode.height - offsetParent.top) / scale;
  let right = (Math.max(fromNode.left + fromNode.width / 2, toNode.left + toNode.width / 2) - offsetParent.left) / scale;
  let bottom = (toNode.top - offsetParent.top) / scale;
  let conditionClassName = '';
  if(fromNode.left === toNode.left)
    conditionClassName = 'straight';
  if(fromNode.left < toNode.left)
    conditionClassName = 'right';
  if(fromNode.left > toNode.left)
    conditionClassName = 'left';
  return (
    <div
      className={`flow-arrow ${conditionClassName}`}
      style={{ left, top, width: right - left, height: bottom - top }}
    >
      <div className="arrow">
        <Icon type="caret-down" />
      </div>
    </div>
  )
}

export default FlowArrow;
